<template>

  <el-card shadow="always" :body-style="{ padding: '20px' }" style="margin-top: 10px">
    <div slot="header" class="header">
      <el-tabs class="demo-tabs" v-model="activeName">
        <el-tab-pane label="销售额" name="sale"></el-tab-pane>
        <el-tab-pane label="访问量" name="visite"></el-tab-pane>
      </el-tabs>
      <!--右侧结构-->
      <div class="right">
        <el-radio-group v-model="radio1" class="rili">
          <el-radio-button label="本天" @click="today" />
          <el-radio-button label="本周" @click="week" />
          <el-radio-button label="本月" @click="month" />
          <el-radio-button label="本年" @click="year" />
        </el-radio-group>

      </div>
      <div class="right">
        <!--日历-->
        <el-date-picker v-model="timeArr" type="daterange" range-separator="-" start-placeholder="入住时间"
          end-placeholder="离开时间" value-format="YYYY-MM-DD" />
      </div>
    </div>
    <!--卡片身体部分-->
    <el-row :gutter="20">
      <el-col :span="18" :offset="0">
        <v-chart :option="getOption()" style="height: 400px" autoresize></v-chart>
      </el-col>
      <el-col :span="6" :offset="0">
        <h6>门店{{ activeName == "sale" ? "销售额" : "访问量" }}排名</h6>
        <ul v-show="activeName == 'sale'">
          <li v-for="(item, index) in arr" :key="index">
            <span :class="{ active: index < 3 }">{{ item.no }}</span>
            <span>{{ item.name }}</span>
            <span>{{ item.count }}</span>
          </li>
        </ul>
        <ul v-show="activeName != 'sale'">
          <li v-for="(item, index) in arr1" :key="index">
            <span :class="{ active: index < 3 }">{{ item.no }}</span>
            <span>{{ item.name }}</span>
            <span>{{ item.count }}</span>
          </li>
        </ul>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import dayjs from 'dayjs'
//收集选项卡的数据
let activeName = ref('sale')
const radio1 = ref('New York')
//获取日期的数据
let timeArr = ref([]);

//天
const today = () => {
  let start = dayjs().format('YYYY-MM-DD');
  let end = dayjs().format('YYYY-MM-DD');
  timeArr.value = [start, end];
};
//周
const week = () => {
  let start = dayjs().day(1).format('YYYY-MM-DD');
  let end = dayjs().day(7).format('YYYY-MM-DD');
  timeArr.value = [start, end];
};
//月
const month = () => {
  let start = dayjs().startOf('month').format('YYYY-MM-DD');
  let end = dayjs().endOf('month').format('YYYY-MM-DD');
  timeArr.value = [start, end];
};
//年
const year = () => {
  let start = dayjs().startOf('year').format('YYYY-MM-DD');
  let end = dayjs().endOf('year').format('YYYY-MM-DD');
  timeArr.value = [start, end];
};

//中间内容柱状图
const getOption = () => {
  return {
    //标题
    title: {
      text: activeName.value == 'sale' ? '销售趋势' : '访问量趋势'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '0',
      right: '0',
      bottom: '0',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: props.x,
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        axisLine: {
          show: true
        },
        axisTick: {
          show: true,
        }
      }
    ],
    series: [
      {
        name: 'Direct',
        type: 'bar',
        barWidth: '60%',
        data: activeName.value == 'sale' ? props.saleArr : props.visiteArr
      }
    ],
    //展示数据
    label: {
      show: true,
      position: 'top',

    }
  };
};
//接收父组件传递过来的数据
let props = defineProps(['x', 'saleArr', 'visiteArr','arr','arr1'])
</script>

<style scoped>
.header {
  position: relative;
}

.right {
  position: absolute;
  right: 0;
  top: 0px;
}

.right .rili {
  margin: 0px 370px 0px 0px;
}

ul {
  list-style: none;
}

/**今晚把flex布局看看**/
li {
  font-size: 12px;
  margin-top: 30px;
  display: flex;
  /**水平轴对齐方式**/
  justify-content: space-between;
}
li span:nth-child(1) {
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
}
li span.active {
  border-radius: 50%;
  background: black;
  color: white;
}
</style>